<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from "vue";
import { numberApi } from "@/api/controller";
import { parseTime } from "@/utils/index";
import { ToastSuccess, Toastloading } from "@/utils/public";
import { roles } from '@/pinia/getter'
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
const $router = useRouter();
import Pagination from "@/components/Pagination/index.vue";
import headBut from "./components/headBut.vue";
import updateUid from "./components/updateUid.vue";
import updateUname from "./components/updateUname.vue";
import updateGender from "./components/updateGender.vue";
import forbidUserList from "./components/forbidUserList.vue";
import getUcertify from "./components/getUcertify.vue";
import addUserMedal from "./components/addUserMedal.vue";
import userinfo from "./components/userinfo.vue";
import moreList from "./components/moreList.vue";
import xmImage from '@/components/xmImage/index.vue'
const headButRef = ref(),
  updateUnameRef = ref(),
  updateGenderRef = ref(),
  updateUidRef = ref(),
  getUcertifyRef = ref(),
  addUserMedalRef = ref(),
  forbidUserListRef = ref(),
  userinfoRef = ref(),
  moreListRef = ref();
const action = reactive({
  total: 0,
  drawerDialog:false,
  list: [] as any[],
  sortOptions: [] as any[],
  forbid_user: [] as any[],
});
const listQuery = reactive<any>({
  page: 1,
  limit: 10,
});
const activeCertifyOptions = [
  { label: "港", value: 2 },
  { label: "澳", value: 3 },
  { label: "台", value: 4 },
  { label: "大陆", value: 1 },
  { label: "其它", value: 5 },
];
const liangFilter = (liang: any) => {
  return ["靓号", "取消靓号"][liang];
};
const superFilter = (_super: any) => {
  return ["超管", "取消超管"][_super];
};
const waiterFilter = (waiter: any) => {
  return ["巡房", "取消巡房"][waiter];
};
const officialFilter = (official: any) => {
  return ["官方", "取消官方"][official];
};
const abnormalFilter = (abnormal: any) => {
  return ["异常", "取消异常"][abnormal];
};
const genderFilter = (gender = 0) => {
  if (gender === 1) {
    return "男";
  } else if (gender === 2) {
    return "女";
  } else {
    return "未知";
  }
};
const forbidUser = async () => {
  const res = await numberApi.getForbidUser();
  action.forbid_user = res.data;
};
const updateChange = async () => {
  await getList();
  const loading = Toastloading();
  forbidUser();
  loading.close();
};
const handleFilter = () => {

  Object.assign(listQuery, {
    page:1,
    ...listQuery,
    ...headButRef.value.listQuery,
  });
  getList();
};
const sortChange = (data: any) => {
  const { prop, order } = data;
  if (prop === "uuid") {
    sortByID(order);
  }
};
const sortByID = (order: any) => {
  const obj = headButRef.value.listQuery;
  if (order === "ascending") {
    obj.sort = "asc";
  } else {
    obj.sort = "desc";
  }
  handleFilter();
};
const handleUUID = (row = {}) => {
  updateUidRef.value.openDialog(row);
};
const handleuserInfo = (row = {}) => {
  userinfoRef.value.openDialog(row);
};
const dialogNickname = (row = {}) => {
  updateUnameRef.value.openDialog(row);
};
const dialogGender = (row = {}) => {
  updateGenderRef.value.openDialog(row);
};
const handleForbidLog = (row = {}) => {
  forbidUserListRef.value.openDialog(row);
};
const setUserMedal = (row = {}) => {
  addUserMedalRef.value.openDialog(row);
};
const toSetLiang = (row: any = {}) => {
  ElMessageBox.confirm("确定执行此操作吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.setLiang(row.user_id, {
        liang: row.liang === 0 ? 1 : 0,
      });
      loading.close();
      ToastSuccess("操作成功!");
      getList();
    })
    .catch(() => { });
};
const toSetSuper = (row: any = {}) => {
  ElMessageBox.confirm("确定执行此操作吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.setSuper(row.user_id, {
        super: row.super === 0 ? 1 : 0,
      });
      loading.close();
      ToastSuccess("操作成功!");
      getList();
    })
    .catch(() => { });
};
const toSetWaiter = (row: any = {}) => {
  ElMessageBox.confirm("确定执行此操作吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.setWaiter(row.user_id, {
        waiter: row.waiter === 0 ? 1 : 0,
      });
      loading.close();
      ToastSuccess("操作成功!");
      getList();
    })
    .catch(() => { });
};
const toSetOfficial = (row: any = {}) => {
  ElMessageBox.confirm("确定执行此操作吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.setOfficial(row.user_id, {
        official: row.official === 0 ? 1 : 0,
      });
      loading.close();
      ToastSuccess("操作成功!");
      getList();
    })
    .catch(() => { });
};

const toSetAbnormal = (row: any = {}) => {
  ElMessageBox.confirm("确定执行此操作吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.setAbnormal(row.user_id, {
        state: row.is_abnormal === 0 ? 1 : 0,
      });
      loading.close();
      ToastSuccess("操作成功!");
      getList();
    })
    .catch(() => { });
};
const activeCertifyDialog = (row: any = {}) => {
  const index = roles.value.indexOf("number_getuseractivecertifyInfo");
  if (index > -1 && row.active_certify == 1) {
    getUcertifyRef.value.openDialog(row);
  }
};

const handleCommand = (command: any) => {
  $router.push({
    path: command.name,
    query: command.params
  })
  // const { href } = $router.resolve({
  //   name: command.name,
  //   query: command.params,
  // });
  // window.open(href, "_blank");
};
const handleCode = (row: any = {}) => {
  ElMessageBox.confirm("确定修改用户邀请二维码激活状态吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.activateCode(row);
      loading.close();
      getList();
      ToastSuccess("操作成功!");
    })
    .catch(() => { });
};
const activeCertifyToName = (row: any = {}) => {
  if (row.active_certify_model) {
    for (const v of activeCertifyOptions) {
      if (row.active_certify_model.type === v.value) {
        return v.label;
      }
    }
  } else {
    return ["未认证", "已认证"][row.active_certify];
  }
};
const opendrawer = (row:any={})=>{
  // const index = action.list.findIndex(res=>res.user_id == row.user_id)
  // action.list[index]['drawerDialog'] = true
  moreListRef.value.openDialog(row)
}
const getList = async (query:any = {}) => {
  const { user_id } = query

  const loading = Toastloading();
  const obj = {} as any;
  for (let i in listQuery) {
    if (listQuery[i]) {
      obj[i] = listQuery[i];
    }
  }
  const res = await numberApi.getNumbers(obj);
  const { data=[], total=0 } = res.data
  action.list = data;
  if(user_id) {
    const item = data.find((res:any)=>res.user_id == user_id)
    handleuserInfo(item)
  }
  action.total = total;
  loading.close();
};
onMounted(() => {
  forbidUser()
  nextTick(() => {
    handleFilter();
  });
});
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <headBut ref="headButRef" :listfun="handleFilter" />
    </div>
    <el-table class="xm-main xm-TableCenter" :data="action.list" border @sort-change="sortChange">
      <el-table-column width="90" prop="user_id" label="ID" />
      <el-table-column width="90" prop="uuid" sortable="custom" label="UUID">
        <template #default="scope">
          <span class="pointer" @dblclick="handleUUID(scope.row)">{{
            scope.row.uuid
          }}</span>
        </template>
      </el-table-column>
      <el-table-column width="200" prop="nickname" label="昵称">
        <template #default="scope">
          <!-- <el-tag class="pointer" @click="handleuserInfo(scope.row)">{{ scope.row.nickname }}</el-tag> -->
          <el-tag class="pointer" @click="dialogNickname(scope.row)">{{ scope.row.nickname }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="80" label="头像">
        <template #default="scope">
          <xmImage
            :src="scope.row.portrait"
            :list="[scope.row.portrait]"
          />
        </template>
      </el-table-column>
      <el-table-column width="60" label="性别">
<!--        <template #default="scope">-->
<!--          <span>{{ genderFilter(scope.row.gender) }}</span>-->
<!--        </template>-->
        <template #default="scope">
          <el-tag class="pointer" @click="dialogGender(scope.row)">{{genderFilter(scope.row.gender) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="120" v-rule="'number_look_mobile'" :show-overflow-tooltip="true" align="center"
        prop="mobile_phone" label="手机号" />
      <el-table-column width="140" prop="union_name" label="所属公会" />
      <el-table-column width="180" label="加入时间">
        <template #default="scope">
          <span>{{
            parseTime(scope.row.create_timestamp, "{y}-{m}-{d} {h}:{i}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column width="85" prop="city" label="状态">
        <template #default="scope">
          <el-tag><span class="pointer" @click="handleForbidLog(scope.row)">{{
            action.forbid_user && action.forbid_user[scope.row.user_id]
            ? "已封号"
            : "正常"
          }}</span></el-tag>
        </template>
      </el-table-column>
      <el-table-column width="85" label="认证">
        <template #default="scope">
          <el-tag :type="scope.row.active_certify === 1 ? 'primary' : 'warning'">
            <span class="pointer" @click="activeCertifyDialog(scope.row)">
              {{ activeCertifyToName(scope.row) }}
            </span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="v" label="V认证">
        <template #default="scope">
          <el-tag><span>{{ scope.row.v === 0 ? "未加V" : "已加V" }}</span></el-tag>
        </template>
      </el-table-column>
      <el-table-column width="140" label="财富值">
        <template #default="scope">
          <span>{{ scope.row.wealth_balance }}</span>
        </template>
      </el-table-column>
      <el-table-column width="140" label="财富等级">
        <template #default="scope">
          <span>{{ scope.row.rank_name }}</span>
        </template>
      </el-table-column>
      <el-table-column width="140" label="签约信息">
        <template #default="scope">
          <template v-if="scope.row.sign_state">
            <el-tag><span>{{ scope.row.sign_union_name }}</span></el-tag>
            <el-tag><span>{{
              parseTime(scope.row.sign_create_time, "{y}-{m}-{d} {h}:{i}")
            }}</span></el-tag>
            <el-tag>
              <span>{{
                parseTime(scope.row.sign_expire_time, "{y}-{m}-{d} {h}:{i}")
              }}</span></el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column width="140" label="登录时间">
        <template #default="scope">
          <template v-if="scope.row.last_login_time">
            <span>{{
              parseTime(scope.row.last_login_time, "{y}-{m}-{d} {h}:{i}")
            }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="v" label="邀请码">
        <template #default="scope">
          <el-button :type="scope.row.is_open_code == 1 ? 'success' : 'primary'" @click="handleCode(scope.row)"><span>{{
            scope.row.is_open_code == 1 ? scope.row.code : "邀请码"
          }}</span></el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="380">
        <template #default="scope">
          <el-dropdown>
            <el-button type="primary">用户状态
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-button text v-rule="'number_setofficial'"
                    :type="scope.row.official === 0 ? 'primary' : 'warning'" @click="toSetOfficial(scope.row)">{{
                      officialFilter(scope.row.official) }}</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button text v-rule="'number_setabnormal'" :type="scope.row.is_abnormal === 0 ? 'primary' : 'warning'
                    " @click="toSetAbnormal(scope.row)">{{ abnormalFilter(scope.row.is_abnormal) }}</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button text v-rule="'number_setwaiter'" :type="scope.row.waiter === 0 ? 'primary' : 'warning'"
                    @click="toSetWaiter(scope.row)">{{ waiterFilter(scope.row.waiter) }}</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button text v-rule="'number_setsuper'" :type="scope.row.super === 0 ? 'primary' : 'warning'"
                    @click="toSetSuper(scope.row)">{{ superFilter(scope.row.super) }}</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button text v-rule="'number_setgoodmobilenumber'"
                    :type="scope.row.liang == 0 ? 'primary' : 'warning'" @click="toSetLiang(scope.row)">{{
                      liangFilter(scope.row.liang) }}</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown class="xm-mx10" @command="handleCommand">
            <span class="el-dropdown-link">
              <el-button v-rule="'number_userAllWater'" type="primary">
                用户流水
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="{
                  name: '/recharge-record',
                  params: {
                    user_id: scope.row.user_id,
                    uuid: scope.row.uuid,
                  },
                }">
                  <el-button v-rule="'number_userWithdrawRecord'" text type="primary">充值流水</el-button>
                </el-dropdown-item>
                <el-dropdown-item :command="{
                  name: '/gold-record',
                  params: {
                    user_id: scope.row.user_id,
                    uuid: scope.row.uuid,
                  },
                }">
                  <el-button v-rule="'number_userKkRecord'" text type="primary">金币流水</el-button>
                </el-dropdown-item>
                <el-dropdown-item :command="{
                  name: '/wealth-record',
                  params: {
                    user_id: scope.row.user_id,
                    uuid: scope.row.uuid,
                  },
                }">
                  <el-button v-rule="'number_userWealthRecord'" text type="primary">财富值流水</el-button>
                </el-dropdown-item>
                <el-dropdown-item :command="{
                  name: '/charm-record',
                  params: {
                    user_id: scope.row.user_id,
                    uuid: scope.row.uuid,
                  },
                }">
                  <el-button v-rule="'number_userCharmRecord'" text type="primary">魅力值流水</el-button>
                </el-dropdown-item>
                <el-dropdown-item :command="{
                  name: '/diamond-record',
                  params: {
                    user_id: scope.row.user_id,
                    uuid: scope.row.uuid,
                  },
                }">
                  <el-button v-rule="'number_userDiamondRecord'" text type="primary">钻石流水</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button type="primary" @click="opendrawer(scope.row)">更多操作</el-button>
          <!-- <el-button v-rule="'number_medal'" type="primary"
            @click="setUserMedal(scope.row)">勋章</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <updateUid ref="updateUidRef" @updateList="getList" />
    <updateUname ref="updateUnameRef" @updateList="getList" />
    <updateGender ref="updateGenderRef" @updateList="getList" />
    <forbidUserList ref="forbidUserListRef" @updateList="updateChange" />
    <getUcertify ref="getUcertifyRef" />
    <addUserMedal ref="addUserMedalRef" @updateList="getList" />
    <userinfo ref="userinfoRef" @updateList="getList" />
    <moreList ref="moreListRef" @updateList="getList" />
  </div>
</template>

<style lang="scss" scoped>
:deep(.xm-dialog) {
  .el-input {
    width: calc($inputWidth);
  }
}
</style>
